<%@ include file="/common/taglibs.jsp" %>
<script type="text/javascript">
	$(document).ready(function() {
		$('#pageTitle').text('<spring:message code="editAudits.heading" />');
		
		$("#partnerMonitoringForm").validate({
			rules : {
				auditsName : {
					required : true
				},
				auditsAcronym : {
					required : true
				},
				field : {
					required : true,
					range : [ 0, 100 ]
				}
			}
		});
		
		// changeColor();
		$("#tabs").tabs();
		
		$('#closeForm').click(function() {
			//if(confirm('Are you sure you want to close the form?')) {
				window.location = '../secure/showDashboard.do';
			//}
	     });
	});

	function changeColor() {
		var elem = document.getElementById("riskAssessmentScore");
		var val = parseInt(elem.value);
		if (val >= 0 && val <= 20) {
			elem.style.color = "green";
			return;
		}
		if ((val >= 21 && val <= 40)) {
			elem.style.color = "blue";
			return;
		} else {
			elem.style.color = "red";
			return;
		}
	}
</script>
<div id="monitoringDiv">
	<form:form id="partnerMonitoringForm" cssClass="main_form" name="partnerMonitoringForm" action="showPartnerMonitoring.do?cipeprojectId=${monitoring.id}" method="post" modelAttribute="monitoring">
    	<div class="form_head">
    		<a href="#" id="closeForm" class="gray_btn floatR" tabindex="-1">Close Form</a><br class="clear" />
    	</div>
        <div class="form_cont">				
			<div><%@ include file="/common/messages.jsp"%></div>
			<div id="monitoringTopLeft">
				<div class="row">
					<label class="left">Partner Name</label><input class="right" type="text" />
				</div>
				<div class="row">
					<label class="left">Donor Name</label><input class="right" type="text" />
				</div>
				<div class="row">
					<label class="left">Project Title</label><input class="right" type="text" />
				</div>
				<div class="row" style="margin-bottom: 30px">
					<c:if test="${!empty monitoring.project.startDate }">
						<fmt:formatDate value="${monitoring.project.startDate}" pattern="MM/dd/yyyy" var="formattedStartDate"/>
					</c:if>
				    <label class="left">Project Start Date</label>
				    <input type="text" style="width: 150px; float: left;">
				    <label style="text-align: right; width: 120px; float: left; margin-right: 5px;" >Project End Date</label>
				    <input type="text" style="width: 150px; float: left;">
				</div>
				<div class="row" style="margin-bottom: 30px">
				    <label class="left">Grant Start Date</label>
				    <input type="text" style="width: 150px; float: left;">
				    <label style="text-align: right; width: 120px; float: left; margin-right: 5px;" >Grant End Date</label>
				    <input type="text" style="width: 150px; float: left;">
				</div>				
			</div>
			<div id="monitoringTopRight">
			    <div class="row">
			        <label class="left">New Grantee?</label>
			        <input type="checkbox" class="right" style="width: 10px;">
			    </div>
			    <div class="row">
			        <label class="left">Donor Award #</label>
			        <input type="text" class="right">
			    </div>
			    <div class="row">
			        <label class="left">Project #</label>
			        <input type="text" class="right">
			    </div>
			</div>
			<br class="clear"/>
			<div id="tabs" style="margin-top: 10px;">
				<ul>
					<li><a href="#generalInformation"><spring:message code="editAudits.heading.generalInformation" /></a></li>
					<li><a href="#internalMonitoring"><spring:message code="editAudits.heading.internalMonitoring" /></a></li>
					<li><a href="#interimAudit"><spring:message code="editAudits.heading.interimAudit" /></a></li>
					<li><a href="#finalAudit"><spring:message code="editAudits.heading.finalAudit" /></a></li>
					<li><a href="#resolution"><spring:message code="editAudits.heading.resolution" /></a></li>
					<li><a href="#auditInfo"><spring:message code="editAudits.heading.auditInformation" /></a></li>
				</ul>
				<div id="generalInformation">
					<div id="genInfoProjectInfo">
						<div class="row">
							<label class="left">Region</label><input class="right" type="text" />
						</div>
						<div class="row">
							<label class="left">Country</label><input class="right" type="text" />
						</div>
						<div class="row">
							<label class="left">Grant #</label><input class="right" type="text" />
						</div>
						<div class="row">
							<label class="left">Cipe Funds</label><input class="right" type="text" />
						</div>
						<div class="row">
							<label class="left">Status</label><input class="right" type="text" />
						</div>
					</div>
					<div id="genInfoRiskAssessment">
						Risk Assessment <input type="text" /><span style="color: green; margin-left: 5px;">Low=0-20</span><span style="color: blue; margin-left: 5px;">Medium=21-40</span><span style="color: red; margin-left: 5px;">High=41-100</span>
					</div>
					<div id="genInfoMonitoring">
						<div style="text-decoration: underline; font-weight: bold; margin-bottom: 5px;">Monitoring</div>
						<div class="leftContainer border1px left">
							<div class="row">
								<label class="left">SMP Only?</label>
						        <input type="checkbox" class="right" style="width: 10px;">							
							</div>
							<div class="row">
								<label class="left">Internal Monitoring?</label>
						        <input type="checkbox" class="right" style="width: 10px;">							
							</div>
							<div class="row">
								<label class="left">Interim Audit?</label>
						        <input type="checkbox" class="right" style="width: 10px;">							
							</div>
							<div class="row">
								<label class="left">Final Audit?</label>
						        <input type="checkbox" class="right" style="width: 10px;">							
							</div>
						</div>
						<div class="rightContainer left">
							<div class="row">
								<label class="left">&nbsp;</label>
						        <label class="right bold_red" >Closed To File?</label>							
							</div>
							<div class="row">
								<label class="left">Date</label>
						        <input class="right" type="text" />							
							</div>
							<div class="row">
								<label class="left">Date</label>
						        <input class="right" type="text" />
							</div>
							<br class="clear"/>
						</div>
					</div>
					<br class="clear"/>
					<!-- Spacer -->
					<div style="height: 30px;">&nbsp;</div>
				</div>
				<div id="internalMonitoring">
					<span style="margin-left: 25px; margin-right: 5px;">IMP Required?</span><input type="checkbox">
					<span style="margin-left: 10px; margin-right: 5px;">IMP Notes</span><textarea style="vertical-align: text-top; width: 300px;"></textarea>
					<br class="clear" />
					<table style="width: 100%; background: white; border: 1px solid; margin-top: 15px; margin-bottom: 5px;">
						<thead>
							<tr>
								<th>IMP action</th>
								<th>IMP due date</th>
								<th>IMP Received</th>
								<th>IMP Approved</th>
								<th>IMP Closed to File</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td colspan="5">No IMP found.</td>
							</tr>
						</tbody>
					</table>
					<input type="button" id="addImp" value="Add IMP Audit" style="height: 35px;"/>
					<br class="clear"/>
				</div>
				<div id="interimAudit">
					<table class="left" style="width: 70%;">
						<tbody>
							<tr>
								<td>
									Interim Audit Required?
									<input type="checkbox" value="true" name="interimaudit" id="interimaudit2"><input type="hidden" value="on" name="_interimaudit">
								</td>
								<td style="text-align: right;">Audit Solicitor</td>
								<td colspan="2"><select style="width: 100%"></select></td>
							</tr>
							<tr>
								<td></td>
								<td class="center_text">Due</td>
								<td class="center_text">Received</td>
								<td class="center_text">Approved</td>
							</tr>
							<tr>
								<td>Interim Selection Memo</td>
								<td><input type="text" value="" name="interimselectionmemoduedate" id="interimselectionmemoduedate"></td>
								<td><input type="text" value="" name="interimselectionmemoreceived" id="interimselectionmemoreceived"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
							</tr>
							<tr>
								<td>Interim Audit Firm</td>
								<td colspan="3">
									<select style="width: 88%;"></select>
									<input type="button" value="Add" style="width: 50px;">
								</td>
							</tr>
							<tr>
								<td>Revised Interim Audit</td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
							</tr>
							<tr>
								<td>Resolution of Findings</td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
							</tr>
							<tr>
								<td>Revised Resolution of Findings</td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
							</tr>
							<tr>
								<td class="bold_red" colspan="4" style="text-align: center;">Interim audit memo/notes</td>
							</tr>
							<tr>
								<td colspan="4">
									<textarea rows="" cols="" style="width: 100%;"></textarea>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="left" style="text-align: center; width: 200px; position: relative; top: 120px; margin-left: 15px;">
						<div class="bold_red" >Closed to File Date</div>
						<input type="text" style="width: 100%"/>
					</div>
					<br class="clear"/>
				</div>
				<div id="finalAudit">
					<table class="left" style="width: 70%;">
						<tbody>
							<tr>
								<td>
									Final Audit Required?
									<input type="checkbox" value="true" name="interimaudit" id="interimaudit2"><input type="hidden" value="on" name="_interimaudit">
								</td>
								<td style="text-align: right;">Audit Solicitor</td>
								<td colspan="2"><select style="width: 100%"></select></td>
							</tr>
							<tr>
								<td></td>
								<td class="center_text">Due</td>
								<td class="center_text">Received</td>
								<td class="center_text">Approved</td>
							</tr>
							<tr>
								<td>Final Selection Memo</td>
								<td><input type="text" value="" name="interimselectionmemoduedate" id="interimselectionmemoduedate"></td>
								<td><input type="text" value="" name="interimselectionmemoreceived" id="interimselectionmemoreceived"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
							</tr>
							<tr>
								<td>Final Audit Firm</td>
								<td colspan="3">
									<select style="width: 88%;"></select>
									<input type="button" value="Add" style="width: 50px;">
								</td>
							</tr>
							<tr>
								<td>Revised Final Audit</td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
							</tr>
							<tr>
								<td>Resolution of Findings</td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
							</tr>
							<tr>
								<td>Revised Resolution of Findings</td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
								<td><input type="text" value="" name="iaclosedtofile" id="iaclosedtofile"></td>
							</tr>
							<tr>
								<td class="bold_red" colspan="4" style="text-align: center;">Final audit memo/notes</td>
							</tr>
							<tr>
								<td colspan="4">
									<textarea rows="" cols="" style="width: 100%;"></textarea>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="left" style="text-align: center; width: 200px; position: relative; top: 120px; margin-left: 15px;">
						<div class="bold_red" >Closed to File Date</div>
						<input type="text" style="width: 100%"/>
					</div>
					<br class="clear"/>				
				</div>
				<div id="resolution">
					<div class="center_text">Interim Audit memo/resolution notes</div>
					<div><textarea rows="" cols="" style="width: 100%"></textarea> </div>
					<div class="center_text">Final Audit memo/resolution notes</div>
					<div><textarea rows="" cols="" style="width: 100%"></textarea> </div>
					<div>
						Interim Audit Closed to File <input type="text" style="margin-right: 30px; margin-left: 5px;"/>
						Final Audit Closed to File <input type="text" style=" margin-left: 5px;"/>
					</div>
					<br class="clear"/>
				</div>
				<div id="auditInfo">
					<div style=""><textarea rows="" cols="" style="width: 100%"></textarea> </div>
					<div style=""><textarea rows="" cols="" style="width: 100%"></textarea> </div>
					<div style=""><textarea rows="" cols="" style="width: 100%"></textarea> </div>
					<br class="clear"/>
				</div>
			</div>
		</div>
	</form:form>
</div>